<template>
  <div>
 <!-- <pre v-html="data"></pre> -->
    <div style="width:42%;float:left;">
       <el-card shadow="never">
          <el-row :gutter="0" style="margin-left:60px;">
            <el-form ref="packet" :model="packetData" :rules="rules" size="mini" label-width="120px"
              label-position="left">
              <el-col :span="21">
                <el-form-item label="是否拼货" prop="fightGoods">
                  <el-radio-group v-model="packetData.fightGoods" size="medium" @change="changefightGoods">
                    <el-radio v-for="(item, index) in fightGoodsOptions" :key="index" :label="item.value"
                      :disabled="item.disabled">{{item.label}}</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="16">
                <el-form-item label="合单类型" prop="shippingWay">
                  <el-radio-group v-model="packetData.shippingWay" size="medium">
                    <el-radio v-for="(item, index) in shippingWayOptions" :key="index" :label="item.value"
                      :disabled="item.disabled">{{item.label}}</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="17">
                <el-form-item label="六脉运单号" prop="lmWaybillNo">
                  <el-input v-model="packetData.lmWaybillNo" placeholder="请输入六脉运单号" :disabled="lmWaybillNoshow" clearable
                    :style="{width: '100%'}"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="4" style="margin-left:-100px;">
                <el-form-item label="" >
                  <el-button type="primary" icon="el-icon-search" size="mini" @click="searchSinglePacketOrder"> 查询 </el-button>
                </el-form-item>
              </el-col>
              <el-col :span="17">
                <el-form-item label="小包单号" prop="waybillNos">
                  <el-input v-model="packetData.waybillNos" type="textarea" placeholder="请输入小包单号"
                    :autosize="{minRows: 5, maxRows: 16}" :style="{width: '100%',height: '200%'}"></el-input>
                </el-form-item>
              </el-col>
            </el-form>
          </el-row>
       </el-card>
    </div>
    <div style="width:58%;float:right;height: 500px;">
      <el-card>
        <el-row :gutter="30">
            <el-col :span="3">
               <span>详细信息>></span>
            </el-col>
            <el-col :span="10">
               <span>&nbsp;</span>
            </el-col>
             <el-col :span="5">
               <el-button size="mini" type="primary" @click="savePacketMerge" style="margin-left: 20px;">保存</el-button>
            </el-col>
            <el-col :span="6">
               <span>&nbsp;</span>
            </el-col>
          </el-row>
        <el-divider></el-divider>
        <el-row >
            <el-col :span="2">
               <span>&nbsp;</span>
            </el-col>
            <el-col :span="20">
              <el-table
                ref="multipleTable"
                :data="tableData"
                tooltip-effect="dark"
                style="width: 100%"
                @selection-change="handleSelectionChange">
                <el-table-column
                  label="序号"
                  type="selection"
                  width="55">
                </el-table-column>
                <el-table-column
                  prop="waybillNo"
                  label="小包单号"
                  width="200">
                </el-table-column>
                <el-table-column
                  prop="inStockActualWeight"
                  label="实重"
                  width="120">
                </el-table-column>
                <el-table-column
                  prop="inStockVolumeWeight"
                  label="体积重"
                  show-overflow-tooltip>
                </el-table-column>
                <el-table-column
                  prop="inStockChargedWeight"
                  label="计费重"
                  show-overflow-tooltip>
                </el-table-column>
                <el-table-column
                  prop="inStockTotalPackages"
                  label="件数"
                  show-overflow-tooltip>
                  <!-- <template slot-scope="scope">
                      <el-input v-model="scope.row.inStockTotalPackages" autocomplete="off" size="small" ></el-input>
                  </template> -->
                </el-table-column>
                <el-table-column label="操作">
                <template slot-scope="scope">
                  <span class="el-icon-close" @click="handleDelete(scope.$index, scope.row)"></span>
                </template>
              </el-table-column>
              </el-table>
            </el-col>
            <el-col :span="2">
               <span></span>
            </el-col>
        </el-row>
        <el-row v-if="totalShow">
          <el-col :span="8">&nbsp;总共</el-col>
          <el-col :span="2">&nbsp;{{totalInStockActualWeight}}</el-col>
          <el-col :span="4">&nbsp;{{totalInStockVolumeWeight}}</el-col>
          <el-col :span="1">&nbsp;{{totalInStockChargedWeight}}</el-col>
          <el-col :span="3"><el-input v-model="totalInStockTotalPackages" autocomplete="off" size="small" style="width: 90px;margin-left:70px;"></el-input></el-col>
          <el-col :span="4"><el-button type="danger" @click="delAll" icon="el-icon-delete" circle style="padding: 5px;"></el-button></el-col>
        </el-row > 
      </el-card>
      
    </div>
  </div>
</template>
<script>
import axios from "axios";
import {ajax} from "@/store/yg/common/utils";
import * as constant from '@/store/yg/common/constant';
import { untransform } from '@/store/yg/common/uri'
export default {
 props: ["field","data"],
     data() {
      return {
        lmWaybillNoshow:false,
        packetData: {
        fightGoods: 1,
        shippingWay: '',
        lmWaybillNo: undefined,
        search: undefined,
        waybillNos: undefined,
      },
      totalShow:false,
      waybillMergeId: null,
      inStockTotalPackages:0,
      totalInStockActualWeight:'',
      totalInStockVolumeWeight:'',
      totalInStockChargedWeight:'',
      totalInStockTotalPackages:0,
      lmWaybillId:'',
      tableData: [{
          id:'',
          waybillNo: '',
          inStockActualWeight: '',
          inStockVolumeWeight: '',
          inStockChargedWeight: '',
          inStockTotalPackages: ''
        }],
        multipleSelection: [],      
      rules: {
        fightGoods: [{
          required: true,
          message: '是否拼货不能为空',
          trigger: 'change'
        }],
        shippingWay: [{
          required: true,
          message: '合单类型不能为空',
          trigger: 'change'
        }],
        // lmWaybillNo: [{
        //   required: true,
        //   message: '请输入六脉运单号',
        //   trigger: 'blur'
        // }],
        waybillNos: [{
          required: true,
          message: '请输入小包单号',
          trigger: 'blur'
        }],
      },
      fightGoodsOptions: [{
        "label": "否",
        "value": 0
      }, {
        "label": "是",
        "value": 1
      }],
      shippingWayOptions: [{
        "label": "ZX",
        "value": "ZX"
      }, {
        "label": "AIR",
        "value": "AIR"
      }, {
        "label": "99",
        "value": "99"
      }, {
        "label": "LCL",
        "value": "LCL"
      }],
      };
     },
     mounted() {
       this.tableData = [];
       console.log(this.data);
       var waybilId = this.$store.state.edit.id;
       if(waybilId){
         console.log('当前Id',waybilId)
         this.createPacketOrderMerge(waybilId);
       }
    }, 
    created: function () {

    },
    methods:{

       // 初始化 操作编辑
       createPacketOrderMerge(id){
          var params={};
          params['id'] = id;
          ajax("createPacketOrderMerge", params).then(
              res => {
              if (res.code == 200) {
                  var waybilldata = res.data['simpleWaybillQuery'];
                  this.lmWaybillId = res.data['lmWaybillId'];
                  this.inStockTotalPackages = res.data['inStockTotalPackages'];
                  this.waybillMergeId = waybilldata['id'];
                  this.tableData = res.data['simpleWaybillQueries'];
                  this.packetData.shippingWay = waybilldata['shippingWay'];
                  
                  this.packetData.lmWaybillNo = res.data['lmWaybillNo'];
                  this.packetData.fightGoods = res.data['fightGoods'];
                  this.packetData.waybillNos = res.data['waybillNos'];
                  this.totalInStockActualWeight = res.data["totalInStockActualWeight"];
                  this.totalInStockVolumeWeight = res.data["totalInStockVolumeWeight"];
                  this.totalInStockChargedWeight = res.data["totalInStockChargedWeight"];
              } else{
                if(null != res.message){
                    this.$message.error(res.message);
                  }else{
                    this.$message.error("加载失败!");
                  }
              }
            },
            error => {
              console.log(error);
            }
          );
       },  
       searchSinglePacketOrder(){
         if(this.packetData.fightGoods === 1 && !this.packetData.lmWaybillNo){
           this.$message.error("请先录入六脉运单号");
           return;
         }
         if(!this.packetData.waybillNos){
           this.$message.error("请先录入分单号");
           return;
         }
         var waybillArr = this.packetData.waybillNos.split('\n');
         var params = {};
         params['param1'] = this.packetData.lmWaybillNo;
         params['param4'] = 0;
         params['param6'] = waybillArr;
         ajax("searchSinglePacketOrder", params).then(
          res => {
          if (res.code == 200) {
            this.lmWaybillId = res.data['lmWaybillId'];
            this.inStockTotalPackages = res.data['inStockTotalPackages'];
            this.tableData = res.data['waybils'];
            this.totalInStockActualWeight = res.data["totalInStockActualWeight"];
            this.totalInStockVolumeWeight = res.data["totalInStockVolumeWeight"];
            this.totalInStockChargedWeight = res.data["totalInStockChargedWeight"];
            // this.totalInStockTotalPackages = res.data["totalInStockTotalPackages"];
            this.totalShow = true;
          } else{
            if(null != res.message){
                this.$message.error(res.message);
              }else{
                this.$message.error("查询失败!");
              }
          }
        },
        error => {
          console.log(error);
        }
      );

       },
       handleDelete(index, row) {
         console.log(index, row);
       },
       toggleSelection(rows) {
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      savePacketMerge(){
        console.log('shippingWay',this.packetData.shippingWay);
        if(this.packetData.fightGoods === 1 && !this.packetData.lmWaybillNo){
           this.$message.error("请先录入六脉运单号");
           return;
         }
         if (null === this.packetData.shippingWay || ''=== this.packetData.shippingWay) {
            this.$message.error("请选择物流方法");
            return ;
          }
          var params = {};
          var ids = [];
          this.tableData.forEach(element => {
              ids.push(element.id);
          });
          params['id'] = this.waybillMergeId;
          params['lmWaybillId'] = this.lmWaybillId;
          params['shippingWay'] = this.shippingWay;
          params['waybillIdArray'] = ids;
          params['inStockActualWeight'] = this.totalInStockActualWeight;
          params['inStockVolumeWeight'] = this.totalInStockVolumeWeight;
          params['inStockChargedWeight'] = this.totalInStockChargedWeight;
          params['inStockTotalPackages'] = this.totalInStockTotalPackages;
          ajax("savePacketMerge", params).then(
          res => {
          if (res.code == 200) {
              this.$message.success("保存成功");
              location.reload();
          } else{
            if(null != res.message){
                this.$message.error(res.message);
              }else{
                this.$message.error("保存失败!");
              }
          }
        },
        error => {
          console.log(error);
        }
      );
      },
      changefightGoods(){
        console.log(this.packetData.fightGoods)
        if(this.packetData.fightGoods ===1){
          this.lmWaybillNoshow = false
        }else{
          this.lmWaybillNoshow = true
          this.packetData.lmWaybillNo = '';
        }
      },
      delAll(){
        this.tableData=[];
        this.totalShow = false;
      }
    }
}
</script>
<style lang="scss" scoped>
 .row-item {
  color: #3f4652;
  line-height: 28px;
  margin-bottom: 14px;
}

 .transition-box {
    margin-bottom: 10px;
    width: 200px;
    height: 100px;
    border-radius: 4px;
    background-color: #409EFF;
    text-align: center;
    color: #fff;
    padding: 40px 20px;
    box-sizing: border-box;
    margin-right: 20px;
  }

    .el-card {
    margin-top: 10px;
    margin-bottom: 20px;
    margin-left: 20px;
    margin-right: 20px;
  }

  .maxheight {
    display: none;
  }

  
</style>
